<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
</head>
<body>
<div id="app">
    <h1>考试管理</h1>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="course.courseName" label="科目" width="180"></el-table-column>
            <#--<el-table-column prop="isOrder" label="是否预约">-->
                <#--<template slot-scope="scope">-->
                    <#--<el-button type="primary" size="small" @click.native="getExamState(scope.$index,scope.row)">预约-->
                    <#--</el-button>-->
                <#--</template>-->
            <#--</el-table-column>-->
            <el-table-column prop="examForm" label="考试形式"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.examForm == '网上考试'" @click.native="startExam(scope.$index,scope.row)"
                               type="primary" size="small">开始考试
                    </el-button>
                    <router-link to="/downloadExam">
                        <el-button v-if="scope.row.examForm == '现场考试'" type="primary" size="small">打印准考证</el-button>
                    </router-link>
                </template>
            </el-table-column>
            <el-table-column prop="examTime" :formatter='dateFormat' label="考试时间"></el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageIndex"
                    :page-size="pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            pageIndex: 1,
            pageSize: 5,
            total: 100,
            tableData: [],
        },
        created: function () {
            this.getExamMsg();
        },
        methods: {
            /*日期格式化*/
            dateFormat: function (row, column) {
                let val = row[column.property];
                //console.log(date);
                let date = new Date(val);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            },
            handleCurrentChange(val) {
                this.pageIndex = val;
                this.getExamMsg();
            },
            getExamMsg: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/student/selectList',
                    data: {pageIndex: this.pageIndex},
                    dataType: 'json',
                    success: function (res) {
                        _this.total = res.resData.total;
                        _this.pageSize = res.resData.pageSize;
                        _this.tableData = res.resData.list;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            },
            //开始考试，转向试卷组件
            startExam: function (index, row) {
                // alert(row.courseId);

                // this.$router.push({name:'开始考试', path:'/stu_exam_start', params:{courseId:cid}});
            },
            //获取预约状态
            getExamState: function (index, row) {
                $.ajax({
                    type: 'post',
                    url: '/api/student/saveExamOrder',
                    data: {examId: row.examId},
                    dataType: 'json',
                    success: function (res) {
                        if (res.status == 200) {
                            _this.$message({
                                showClose: true,
                                message: '预约成功，注意不要错过考试时间',
                                type: 'success'
                            });

                        } else {
                            _this.$message({
                                showClose: true,
                                message: res.message,
                                type: 'error'
                            });
                        }
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })
            }

        }
    })
</script>
</body>
</html>
